<template>
	<view>
		<cu-custom bgColor="bg-grey light" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">校历</view>
		</cu-custom>

		<loginModal :showLoginModal="isLoginModalShow" @changes="loginModalConfirm"></loginModal>

		<view class="flex justify-center padding-sm text-center">
			<view :class="'load-progress ' + (loadProgress != 0 ? 'show' : 'hide')" :style="'top:' + CustomBar + 'px;'">
				<view class="load-progress-bar bg-green"
					:style="'transform: translate3d(-' + (100 - loadProgress) + '%, 0px, 0px);'"></view>
			</view>

			<view class="margin-lr-sm cu-tag line-blue radius" style="height: 64rpx">
				{{ currentTime }}
			</view>

			<button :class="'cu-btn line-cyan round icon ' + (isLoad ? 'loading' : '')" @tap="refresh">
				<text class="cuIcon-loading"></text>
			</button>
		</view>

		<view class="flex bg-white" v-for="(week, indexMonth) in monthArr" :key="week.key">
			<view class="side_month padding-tb-sm">
				{{ monthTip[indexMonth] }}
				<text>{{ monthTip[indexMonth] ? '月' : '' }}</text>
			</view>

			<view class="side_num flex justify-between padding-tb-sm">
				<view
					:class="'day ' + (monthPoint[indexMonth] == nowMonth && day == nowDay ? 'now' : '') + ' ' + indexMonth"
					v-for="(day, indexNaN) in week" :key="day.key">
					{{ day }}
				</view>
				<view :class="'week ' + indexMonth">{{ indexMonth + 1 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/linian/index.js
	const app = getApp();
	import {
		getXiaoLi
	} from '../../utils/getXiaoLi.js'
	import loginModal from '@/pages/login-modal/index'
	export default {
		components: {
			loginModal,
		},
		data() {
			return {
				CustomBar: app.globalData.CustomBar,
				currentTime: '未获取',
				loadProgress: 0,
				isLoad: false,
				nowMonth: new Date().getMonth() + 1,
				nowDay: new Date().getDate(),
				kxrq: '',
				skzs: '',
				monthTip: '',
				monthArr: '',
				monthPoint: '',
				isLoginModalShow: false,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			let that = this;
			uni.getStorage({
				key: 'userID',
				fail() {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				},
				success() {
					uni.getStorage({
						key: 'xiaoliData',
						success(res) {
							that.setData({
								currentTime: res.data.currentTime,
								kxrq: res.data.kxrq,
								skzs: res.data.skzs,
								monthTip: res.data.monthTip,
								monthArr: res.data.monthArr,
								monthPoint: res.data.monthPoint
							});
						},
						fail() {
							that.refresh();
						}
					});
				}
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			loginModalConfirm(e) {
				this.setData({
					isLoginModalShow: false,
				});
				this.refresh()
			},

			showLoginModal() {
				this.setData({
					isLoginModalShow: true
				});
			},

			loadProgressFun() {
				this.setData({
					loadProgress: this.loadProgress + 3
				});

				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.loadProgressFun();
					}, 100);
				} else {
					this.setData({
						loadProgress: 0
					});
				}
			},

			async refresh() {
				this.loadProgressFun();
				this.setData({
					isLoad: true
				});
				let that = this;
				uni.showLoading({
					title: '正在获取校历'
				});

				let res = await getXiaoLi()
				console.log(res)
				uni.hideLoading()
				if (res == null) {
					that.showLoginModal();
					that.setData({
						isLoad: false
					});
					return
				}

				uni.showToast({
					title: '获取成功'
				});

				that.setData({
					isLoad: false,
					loadProgress: 100,
					currentTime: res.currentTime,
					kxrq: res.kxrq,
					skzs: res.skzs
				});
				that.buildCalendar()
			},

			buildCalendar() {
				let kxrq = this.kxrq;
				let skzs = this.skzs;
				let begin_year = kxrq.substring(0, 4) - 0;
				let begin_month = kxrq.substring(4, 6) - 0 - 1;
				let begin_day = kxrq.substring(6, 9) - 0;
				let monthArr = [];
				var date = new Date(begin_year, begin_month, begin_day);
				var d = date.getDay();

				if (d == 0) {
					d = 6;
				} else {
					d = d - 1;
				}

				let num = d;
				date = Date.parse(new Date(date)) / 1000; //转换为时间戳

				date -= 86400 * num; //修改后的时间戳

				date = new Date(parseInt(date) * 1000); //转换为时间

				let temp_month = 0;
				let monthTip = [];
				let temp_day = date;
				let monthPoint = [];

				for (let i = 0; i < skzs; i++) {
					let week_arr = [];
					let now_month = temp_day.getMonth() + 1;
					monthPoint.push(now_month);

					if (now_month == temp_month) {
						monthTip.push('');
					} else {
						monthTip.push(now_month);
						temp_month = now_month;
					}

					let t = Date.parse(new Date(temp_day)) / 1000;

					for (let j = 0; j < 7; j++) {
						temp_day = new Date(parseInt(t) * 1000);
						week_arr.push(temp_day.getDate());
						t += 86400;
					}

					temp_day = new Date(parseInt(t) * 1000);
					monthArr.push(week_arr);
				}

				this.setData({
					monthTip,
					monthArr,
					monthPoint
				});
				let xiaoliData = {
					currentTime: this.currentTime,
					kxrq: this.kxrq,
					skzs: this.skzs,
					monthTip,
					monthArr,
					monthPoint
				};
				console.log(xiaoliData);
				uni.setStorageSync('xiaoliData', xiaoliData);
			},
		}
	};
</script>
<style>
	@import './index.css';
</style>
